<template>
  <div class="myinfo">
    <!-- 头部 -->
    <div class="header" @click="mine">
      <van-icon class="left" name="arrow-left" />
      编辑个人信息
    </div>
    <!-- 头像和名称 -->
    <div class="name">
      <!-- 头像 -->
      <div @click="headericon">
        <span>头像</span>
        <div>
          <van-image class="pic" round width="2.5rem" height="2.5rem" src="/imgs/touxiang.jpg"/>
        </div>
        <van-icon class="right" name="arrow" />
      </div>
      <!-- 昵称 -->
      <div @click="nickname">
        <span>昵称</span>
        <span>请输入一个昵称吧</span>
        <van-icon class="right" name="arrow" />
      </div>
      <!-- 签名 -->
      <div @click="signword">
        <span>签名</span>
        <span>介绍一下你自己吧: )</span>
        <van-icon class="right" name="arrow" />
      </div>
    </div>
    <!-- 更多信息 -->
    <div class="more">
      <!-- 性别 -->
      <div @click="gender">
        <span>性别</span>
        <span>请填写性别</span>
        <van-icon class="right" name="arrow" />
      </div>
      <!-- 生日 -->
      <div @click="birthday">
        <span>生日</span>
        <span>请填写生日</span>
        <van-icon class="right" name="arrow" />
      </div>
      <!-- 手机 -->
      <div @click="cellphone">
        <span>手机</span>
        <span>点击绑定</span>
        <van-icon class="right" name="arrow" />
      </div>
      <!-- 地区 -->
      <div @click="city">
        <span>地区</span>
        <span>请选择城市</span>
        <van-icon class="right" name="arrow" />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        username: '',
      }
    },
    methods: {
      mine() {
        this.$router.push("/mine")
      },
      headericon(){
        this.$router.push("/headericon")
      },
      nickname(){
        this.$router.push("/nickname")
      },
      signword(){
        this.$router.push("/signword")
      },
      gender(){
        this.$router.push("/gender")
      },
      birthday(){
        this.$router.push("/birthday")
      },
      cellphone(){
        this.$router.push("/cellphone")
      },
      city(){
        this.$router.push("/city")
      },
    },
    
  }
</script>

<style lang="scss" scoped>
  body{
    background-color: #f9f9f9;
  }
  .header {
    margin-top: 3.5vmin;
    height: 10vmin;
    line-height: 10vmin;
    background-color: #fff;
    text-align: center;

    .left {
      float: left;
      line-height: 10vmin;
      margin-left: 1.5vmin;
    }
  }
  .name {
    height: 35.5vmin;
    margin: 4vmin 0;
    background-color: #fff;
    color: #999;

    .right {
      float: right;
      line-height: 9vmin;
    }

    >div {
      margin: 2.5vmin 0;
      border-bottom: 1px solid rgba(#999,  0.2);
    }

    >div>span {
      padding: 10px 25px 0 20px;
    }

    >div:not(:first-child) {
      height: 9vmin;
      line-height: 9vmin;
    }
    
    >div:first-child {
      height: 12.5vmin;
      line-height: 12.5vmin;
      
      >span {
        float: left;
      }

      .right {
        line-height: 12.5vmin;
      }

      .pic {
        margin: 5px 25px 10px 20px;
        display: block;
        float: left;
      }
    }
  }
  .more {
    height: 43.75vmin;
    color: #999;
    background-color: #fff;
    margin: 3.75vmin 0;

    >div {
      height: 9vmin;
      line-height: 9vmin;
      margin: 2.5vmin 0;
      border-bottom: 1px solid rgba(#999,  0.2);

      .right {
        float: right;
        line-height: 9vmin;
      }

      >span:first-child {
        padding: 10px 25px 10px 20px;
      }

      >span:nth-child(2) {
        padding: 10px 25px 0 20px;
      }
    }
  }
    
</style>